<template>
  <n-layout has-sider class="page-layout">
    <n-layout-sider class="page-layout__sider" content-style="padding: 24px;">
      <div class="page-layout__title">
        <router-link to="/welcome" @click="onWelcomUpdate">
          <n-icon size="40"><cloud-outlined /></n-icon>
          后台管理系统</router-link
        >
      </div>
      <n-menu
        @update:value="onMenuValueUpdate"
        :options="menuOptions"
        inverted
        :value="currentMenuKey"
      />
      <!-- :expanded-keys="[parentKey]" -->
    </n-layout-sider>
    <n-layout
      class="page-layout__main"
      content-style="display: flex;flex-direction: column"
    >
      <!-- 页面头 -->
      <n-layout-header class="page-layout__header">
        <n-breadcrumb class="breadcrumb">
          <n-breadcrumb-item>
            <router-link class="normal" to="/welcome"  @click="onWelcomUpdate">首页</router-link>
          </n-breadcrumb-item>
          <n-breadcrumb-item>
            <span class="normal">{{ parentLabel }}</span>
          </n-breadcrumb-item>
          <n-breadcrumb-item>
            <span class="current">{{ childLabel }}</span>
          </n-breadcrumb-item>
        </n-breadcrumb>
        <router-link class="button" @click="exit" to="/login"
          >退出登录</router-link
        >
      </n-layout-header>

      <!-- 页面主体 -->
      <n-layout-content class="page-layout__content">
        <!-- 路由页面 -->
        <router-view />
      </n-layout-content>
      <!-- 页面底部 -->
      <n-layout-footer class="page-layout__footer"
        >@Copyright GroupOne</n-layout-footer
      >
    </n-layout>
  </n-layout>
</template>

<script lang="ts">
import { watch, ref, Component, computed } from "@vue/runtime-core";
import {
  NLayout,
  NLayoutSider,
  NLayoutHeader,
  NLayoutContent,
  NLayoutFooter,
  NMenu,
  NIcon,
  NBreadcrumb,
  NBreadcrumbItem,
} from "naive-ui";
import { useRoute, useRouter } from "vue-router";
// 图标
import { h } from "vue";
import {
  UserOutlined,
  InboxOutlined,
  BarChartOutlined,
  ContactsOutlined,
  UnlockTwotone,
  IdcardOutlined,
  InsertRowAboveOutlined,
  ShoppingTwotone,
  SignalFilled,
  OrderedListOutlined,
  CodeSandboxOutlined,
  CodepenOutlined,
  ContainerTwotone,
  CloudOutlined,
} from "@vicons/antd";

function renderIcon(icon: Component) {
  return () => h(NIcon, null, { default: () => h(icon) });
}

export default {
  components: {
    NLayout,
    NLayoutSider,
    NLayoutHeader,
    NLayoutContent,
    NLayoutFooter,
    NMenu,
    CloudOutlined,
    NIcon,
    NBreadcrumb,
    NBreadcrumbItem,
  },
  mounted() {
    localStorage.setItem('goodsList',JSON.stringify([
      {
        id:'111',
        goodsName:"【海外购自营】黎珐(ReFa) MTG日本 CARAT铂金微电流瘦脸瘦身提拉紧致V脸美容仪 【保税仓发货】",
        price:100,
        num:100,
        weight:100,
        time:'2017/12/03 11:31:17',
      },
      {
        id:'112',
        goodsName:"【海外购自营】黎珐(ReFa) MTG日本 CARAT铂金微电流dad瘦脸瘦身提拉紧致V脸美容仪 【保税仓发货】",
        price:19,
        num:29,
        weight:110,
        time:'2017/12/03 12:31:32',
      },
    ]))
    localStorage.setItem('goodsClassificationList',JSON.stringify([
      {
        id:'113',
        classifyName:'大家电',
        effective:true,
        level:[],
        children: [
            {
              id:'222',
              classifyName:'冰箱',
              effective:true,
              level:[0],
            },
          ]
      },
      {
        id:'333',
        classifyName:'手机数码',
        effective:true,
        level:[],
        children: [
            {
              id:'444',
              classifyName:'手机',
              effective:true,
              level:[1],
              children: [
                {
                  id:"555",
                  classifyName:'小米',
                  effective:true,
                  level:[1,0],
                  staticProperties:['内存','处理器'],
                  staticPropertiesTags:{'内存':["1T"],'处理器':["A14"]},
                  dynamicProperties:['屏幕','电池'],
                  dynamicPropertiesTags:{'屏幕':['1080px','1440px','1960px'],'电池':['5000ma']},
                },
              ]
            },
            {
              id:'666',
              classifyName:'相机',
              effective:true,
              level:[1],
              children: [
                {
                  id:'777',
                  classifyName:'索尼',
                  effective:true,
                  level:[1,0],
                  staticProperties:[{'像素':[]}],
                  dynamicProperties:[{'电池':[]}],
                },
              ]
            }
          ]
      },
    ]))
  },
  setup() {
    /**
     * 路由相关配置
     */
    const routeMap: { [key: string]: string } = {
      userList: "/user/user-list",
      roleList: "/permissions/role-list",
      permissionsList: "/permissions/permissions-list",
      goodsList: "/goods/goods-list",
      classificationParams: "/goods/classification-params",
      goodsClassification: "/goods/goods-classification",
      orderList: "/order/order-list",
      dataReport: "/statistics/data-report",
      // 点击welcome取消菜单选中
      welcome: "/welcome",
    };

    const menuOptions = [
      {
        key: "user",
        label: "用户管理",
        icon: renderIcon(UserOutlined),
        children: [
          {
            key: "userList",
            label: "用户列表",
            icon: renderIcon(ContactsOutlined),
          },
        ],
      },
      {
        key: "permissions",
        label: "权限管理",
        icon: renderIcon(UnlockTwotone),
        children: [
          {
            key: "roleList",
            label: "角色列表",
            icon: renderIcon(IdcardOutlined),
          },
          {
            key: "permissionsList",
            label: "权限列表",
            icon: renderIcon(InsertRowAboveOutlined),
          },
        ],
      },
      {
        key: "goods",
        label: "商品管理",
        icon: renderIcon(ShoppingTwotone),
        children: [
          {
            key: "goodsList",
            label: "商品列表",
            icon: renderIcon(OrderedListOutlined),
          },
          {
            key: "classificationParams",
            label: "分类参数",
            icon: renderIcon(CodeSandboxOutlined),
          },
          {
            key: "goodsClassification",
            label: "商品分类",
            icon: renderIcon(CodepenOutlined),
          },
        ],
      },
      {
        key: "order",
        label: "订单管理",
        icon: renderIcon(ContainerTwotone),
        children: [
          {
            key: "orderList",
            label: "订单列表",
            icon: renderIcon(InboxOutlined),
          },
        ],
      },
      {
        key: "statistics",
        label: "数据统计",
        icon: renderIcon(SignalFilled),
        children: [
          {
            key: "dataReport",
            label: "数据报表",
            icon: renderIcon(BarChartOutlined),
          },
        ],
      },
    ];

    const router = useRouter();
    /**
     * 用于渲染面包屑数据
     */

    const childMap: { [key: string]: string } = {
      userList: "用户列表",
      roleList: "角色列表",
      permissionsList: "权限列表",
      goodsList: "商品列表",
      classificationParams: "分类参数",
      goodsClassification: "商品分类",
      orderList: "订单列表",
      dataReport: "数据报表",
    };
    const parentMap: { [key: string]: string } = {
      userList: "用户管理",
      roleList: "权限管理",
      permissionsList: "权限管理",
      goodsList: "商品管理",
      classificationParams: "商品管理",
      goodsClassification: "商品管理",
      orderList: "订单管理",
      dataReport: "数据统计",
    };

    let parentLabel = ref("@");
    let childLabel = ref("@");

    /**
     * 菜单值更新事件
     */
    const onMenuValueUpdate = (key: keyof typeof routeMap) => {
      parentLabel.value = parentMap[key];
      childLabel.value = childMap[key];
      router.push(routeMap[key]);
    };

    /**
     * 调节 welcom 面包屑
     */
    const onWelcomUpdate = () => {
      parentLabel.value = "@";
      childLabel.value = "@";
    };

    /**
     * value 双向绑定
     */
    const route = useRoute();
    const currentMenuKey = ref<keyof typeof routeMap>("");
    watch(
      () => route.path,
      () => {
        Object.keys(routeMap).some((k: unknown) => {
          const currentKey = k as keyof typeof routeMap;
          const currentPath = routeMap[currentKey];
          const isMatch = currentPath === route.path;

          if (isMatch) {
            currentMenuKey.value = currentKey;
          }

          return isMatch;
        });
      }
    );

    /**
     * 暂时还在研究
     * 对应路由让菜单自动展开
     */

    /*     const parentKey = computed(() => {
      switch (currentMenuKey.value) {
        case "list":
        case "basic":
        case "goods":
          return "goods";
        case "myinfo":
        case "my":
          return "my";

        default:
          return "";
      }
    }); */

    /**
     * 退出按钮
     */
    const exit = () => {
      localStorage.removeItem("key");
    };

    return {
      menuOptions,
      onMenuValueUpdate,
      currentMenuKey,
      parentLabel,
      childLabel,
      onWelcomUpdate,
      exit,
    };
  },
};
</script>

<style>
body {
  /* 无法被选中 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.page-layout {
  height: 100%;
}

.page-layout__sider {
  color: #fff;
  background: #001529;
}

.page-layout__title {
  font-size: 22px;
  font-weight: 500;
}
.page-layout__title a {
  display: flex;
  color: #fff;
  text-decoration: none;
}

.page-layout__main {
  background: #f0f2f5;
}

.page-layout__header {
  position: relative;
  height: 48px;
  padding: 0 20px;
  min-height: 48px;
  background: #fff;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #fff;
}

.page-layout__header a {
  text-decoration: none;
}

.page-layout__header div {
  height: 48px;
  line-height: 48px;
}
.page-layout__header .normal {
  color: #fff;
}
.page-layout__header .current {
  color: rgb(247, 155, 155);
}
.page-layout__header .button {
  position: absolute;
  top: 7px;
  right: 20px;
  width: 100px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 16px;
  background: #f56c6c;
  color: #fff;
  cursor: pointer;
  border-radius: 20px;
  box-shadow: 0 0 10px #f56c6c;
}

.page-layout__content,
.page-layout__footer {
  background: transparent;
}

.page-layout__footer {
  text-align: center;
}

/* 强制样式 */
.n-layout-sider-scroll-container {
  padding: 10px !important;
}
.n-menu.n-menu--vertical {
  font-size: 18px !important;
}
.page-layout__title {
  width: 240px !important;
  padding: 10px 0 10px;
  display: flex !important;
  justify-content: space-around !important;
}
.n-layout-sider-scroll-container {
  overflow: hidden !important;
  background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(0, 0, 0, 0.15) 100%
    ),
    radial-gradient(
        at top center,
        rgba(255, 255, 255, 0.192) 0%,
        rgba(0, 0, 0, 0.4) 120%
      )
      #9898981a;
  background-blend-mode: multiply, multiply;
}
.n-menu-item-content:hover {
  transition: all 0.1s;
  background: rgba(0, 0, 0, 0.1);
}
/* header */
.page-layout__header,
.page-layout__footer {
  background-image: linear-gradient(to right, #262627 0%, rgb(36, 39, 56) 100%);
  color: #fff;
}
/* footer */
</style>
